<!-- 点击调起微信扫一扫 -->
<template>
<div>
  <div class="sixth-input-box" :class="{'border-active':border_active,'border-width100':borderLength}" @click="openInvoiceFunc">
      <span class="c-name"><i class="must-entry" v-if="hKind !== '0'">*</i>{{hPlaceholder}}</span><input ref="cInput" class="c-input" :class="hValue === ''?'c-opacity':''" type="text" :placeholder="hPlaceholder" :value="codeVal" disabled>
  </div>
  <div class="qr-code" v-show="qr_code">
    <div class="qr-code-mask" @click="closeInvoiceFunc"></div>
    <div class="qr-code-mask" style="z-index: 10" @click="closePicker" v-show="picker_mask"></div>
    <dl class="qr-code-container">
      <dd class="qr-code-scan">
        <div class="qr-code-scan-icon" @click="wxScanFunc"><img src="../../assets/img/icon-08.png" alt=""></div>
        <span class="qr-code-scan-text" @click="wxScanFunc">扫一扫</span>
      </dd>
      <dd class="qr-code-list">
        <div class="qr-code-left"><div class="qr-code-icon"><img src="../../assets/img/icon-05.png" alt=""></div><div class="qr-code-name">发票代码</div></div>
        <div class="qr-code-right"><input type="tel" v-model="fpdm" placeholder="发票代码"></div>
      </dd>
      <dd class="qr-code-list">
        <div class="qr-code-left"><div class="qr-code-icon"><img src="../../assets/img/icon-05.png" alt=""></div><div class="qr-code-name">发票号码</div></div>
        <div class="qr-code-right"><input type="tel" v-model="fphm" placeholder="发票号码"></div>
      </dd>
      <dd class="qr-code-list">
        <div class="qr-code-left"><div class="qr-code-icon"><img src="../../assets/img/icon-09.png" alt=""></div><div class="qr-code-name">发票日期</div></div>
        <div class="qr-code-right" @click="openPicker"><input type="text" v-model="kprq"  placeholder="发票日期" disabled></div>
      </dd>
      <dd class="qr-code-list">
        <div class="qr-code-left"><div class="qr-code-icon"><img src="../../assets/img/icon-06.png" alt=""></div><div class="qr-code-name">发票金额</div></div>
        <div class="qr-code-right"><input type="number" v-model="je" placeholder="发票金额"></div>
      </dd>
      <dd class="qr-code-list">
        <div class="qr-code-left"><div class="qr-code-icon"><img src="../../assets/img/icon-07.png" alt=""></div><div class="qr-code-name">检验码后六位</div></div>
        <div class="qr-code-right"><input type="tel"  v-model="jym" placeholder="检验码后六位"></div>
      </dd>
      <dd class="qr-code-button">
        <div class="qr-code-button-text" @click="searchInvoiceFunc">确认</div>
      </dd>
    </dl>
  </div>
    <mt-datetime-picker 
    :modal="false"
    year-format="{value} 年"
    month-format="{value} 月"
    date-format="{value} 日"
    hour-format="{value} 时"
    minute-format="{value} 分"
    style="position:absolute;"  :endDate="new Date()" ref="picker" type="date"
    v-model="pickerValue" 
    @confirm="choseTimeFunc">
    </mt-datetime-picker>
  </div>
</template>

<script>
import { Toast, DatetimePicker } from 'mint-ui'
import myClass from '@/assets/js/common'
export default {
  name: '',

  data () {
    return {
      pickerValue: new Date(),
      picker_mask: false, // 是否显示picker mask
      qr_code: false, // 是否显示发票弹窗
      border_active: false, // 错误展示类
      fpdm: '', // 发票代码
      fphm: '', // 发票号码
      kprq: '', // 发票日期
      je: '', // 发票金额
      jym: '' // 检验码后六位
    }
  },
  props: {
    'h-value': {
      default: () => {
        return ''
      }
    },
    'h-placeholder': {
      default: () => {
        return ''
      }
    },
    // 0 不校验 1校验下是否为空 2校验下是否为数字
    'h-kind': {
      default: '0',
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['0', '1', '2', '3'].indexOf(value) !== -1
      }
    },
    // 用来校验 当变化的时候 一般提交的时候变化
    'h-check': {
      default: 0
    },
    // 是否底部边框填充为100% boolean
    'border-length': {
      default: () => {
        return true
      }
    }
  },
  components: {},

  computed: {
    codeVal () {
      return this.hValue
    }
  },
  watch: {
    hCheck () {
      if (this.hKind === '1' && this.$refs['cInput'].value.trim() !== '') {
        this.border_active = false
      } else if (this.hKind === '1') {
        this.border_active = true
      }
    },
    hValue (afterDate) {
      if (this.hKind === '1' && afterDate !== '') {
        this.border_active = false
      } else if (this.hKind === '1') {
        this.border_active = true
      }
    }
  },
  methods: {
    // 选择日期格式转换
    choseTimeFunc (time) {
      this.picker_mask = false
      this.kprq = myClass.computedDateTime(time, 'YYYYMMDD')
    },
    // 打开picker
    openPicker () {
      this.picker_mask = true
      this.$refs.picker.open()
    },
    // 关闭picker
    closePicker () {
      this.picker_mask = false
      this.$refs.picker.close()
    },
    // 打开发票弹窗
    openInvoiceFunc () {
      this.$store.commit('mutateChangeZIndex',{overHidden: true ,zIndex: -1})
      this.qr_code = true
    },
    closeInvoiceFunc () {
      this.$store.commit('mutateChangeZIndex',{overHidden: false ,zIndex: 10})
      this.qr_code = false
    },
    searchInvoiceFunc () {
      if (this.fpdm === '') {
        Toast('发票代码不能为空')
        return
      }
      if (this.fphm === '') {
        Toast('发票号码不能为空')
        return
      }
      if (this.kprq === '') {
        Toast('发票日期不能为空')
        return
      }
      if (this.je === '') {
        Toast('发票金额不能为空')
        return
      }
      if (this.jym === '') {
        Toast('检验码后六位不能为空')
        return
      }
     let [fpdm, fphm, kprq, je, jym] = [this.fpdm, this.fphm, this.kprq, this.je, this.jym]
      this.$api.get(this.$apiPath.baseURL, this.$apiPath.url, {
            action_type: 'GetBillState',
            action_data: '',
            // fpdm:'3300174320', fphm:'39912525', kprq:'20180701', je:'100', jym:'051460',
            fpdm, // 发票代码
            fphm, // 发票号码
            kprq, // 发票日期
            je, // 发票金额
            jym, // 发票校验码后六位
            appkey: '55f5e380b14df59792bdeb7dcaf268b6'
          }).then(res2 => {
            // Toast(JSON.stringify(res2))
            // alert(JSON.stringify(res2))
            if (res2 && res2.status === 200 && res2.data.BillInfo) {
              if (res2.data.BillInfo.length > 0) {
                Toast('发票校验成功')
                this.$emit('confirmCode', {BILLCODE: res2.data.BillInfo[0].BILL_FPHM})
                this.$store.commit('mutateChangeZIndex',{overHidden: false ,zIndex: 10})
                this.qr_code = false
              } else {
                Toast('查不到该类发票')
              }
            }
          })
    },
    wxScanFunc () {
      let _this = this
      this.$wx.scanQRCode({
        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
        success: function(res) {
          
          let codeArr = res.resultStr.split(',')
          let [fpdm, fphm, kprq, je, jym] = [codeArr[2], codeArr[3], codeArr[5], codeArr[4], codeArr[6].slice(-6)]
          _this.fpdm = fpdm
          _this.fphm = fphm
          _this.kprq = kprq
          _this.je = je
          _this.jym = jym
          // alert(JSON.stringify([fpdm, fphm, kprq, je, jym]))
          _this.$api.get(_this.$apiPath.baseURL, _this.$apiPath.url, {
            action_type: 'GetBillState',
            action_data: '',
            // fpdm:'3300174320', fphm:'39912525', kprq:'20180701', je:'100', jym:'051460',
            fpdm, // 发票代码
            fphm, // 发票号码
            kprq, // 发票日期
            je, // 发票金额
            jym, // 发票校验码后六位
            appkey: '55f5e380b14df59792bdeb7dcaf268b6'
          }).then(res2 => {
            // Toast(JSON.stringify(res2))
            // alert(JSON.stringify(res2))
            if (res2 && res2.status === 200 && res2.data.BillInfo) {
              if (res2.data.BillInfo.length > 0) {
                Toast('发票校验成功')
                _this.$emit('confirmCode', {BILLCODE: res2.data.BillInfo[0].BILL_FPHM})
                _this.$store.commit('mutateChangeZIndex',{overHidden: false ,zIndex: 10})
                _this.qr_code = false
              } else {
                Toast('信息不完整或查不到该类发票，请手动输入')
              }
            }
          })
        }
      })
    }
  },

  mounted () {}
}
</script>
<style lang="stylus" scoped>
$rem = 2.5
.sixth-input-box
  position relative
  display flex
  justify-content flex-start
  align-items center 
  padding  0.5rem * $rem  0.18rem * $rem 0.5rem * $rem 0.22rem * $rem
  .financial-reimbursement-jiantou8
    display inline-block
    color #cacaca
    transform rotate(-90deg)
    padding-top 0.1rem * $rem
  &:after
    content ''
    position absolute
    bottom 0
    left 0
    right 0
    margin 0 auto
    width calc(100% - 1rem)
    height 0.02rem * $rem
    background-color #dddddd
  &.border-width100:after
    width 100%
  &.border-active:after
    background-color #ff0000
  .c-input
    width auto
    height 0.6rem * $rem 
    font-size 0.27rem * $rem
    line-height 0.6rem * $rem
    background-color transparent
    border none
    outline none
    color #333
    flex 1 1 auto
    text-align right
    padding-left 0
    &.c-opacity:disabled
      color #b3afaf
      -webkit-text-fill-color #b3afaf
  .c-name
    color #1a1e24
    font-weight bold
    padding-right 0.1rem * $rem
    font-size 0.3rem * $rem
    .must-entry
      position absolute
      display flex
      align-items center
      height 100%
      top 0
      left 0.06rem * $rem
      font-size 0.3rem * $rem
      color #ff6b6b
      font-style normal
      line-height normal
.qr-code
  position absolute
  top 0
  left 0
  width 100%
  height 100%
  display flex
  justify-content center
  align-items center
  z-index 99
  .qr-code-mask
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    background-color rgba(0,0,0,0.7)
    z-index 4
  .qr-code-container
    position relative
    width 95%
    min-height 2.5rem * $rem
    padding 0.15rem * $rem  0.45rem * $rem 0.8rem * $rem
    background-color #ffffff
    border-radius 0.1rem * $rem
    z-index 5
    .qr-code-list
      display flex
      flex-flow row nowrap
      justify-content flex-start
      align-items center
      padding 0.35rem * $rem 0 0.1rem * $rem
      border-bottom 0.02rem * $rem solid #a7c5d9
      .qr-code-left
        display flex
        flex-flow row nowrap
        justify-content flex-start
        align-items center
        .qr-code-icon
          height 0.35rem * $rem
          font-size 0
          img
            max-height 100%
        .qr-code-name
          padding-left 0.15rem * $rem
          font-size 0.28rem * $rem
      .qr-code-right
        flex 1 1 auto
        height 0.44rem * $rem
        input
          width 100%
          height 100%
          border none
          outline none
          text-align right
          line-height 0.44rem * $rem
    .qr-code-button
      margin-top 0.28rem * $rem
      .qr-code-button-text
        width 100%
        height 0.8rem * $rem
        border-radius 0.05rem * $rem
        background-color #5095f3
        text-align center
        line-height 0.8rem * $rem
        color #ffffff
        font-size 0.3rem * $rem
    .qr-code-scan
      display flex
      justify-content flex-end
      align-items center
      padding 0.17rem * $rem
      .qr-code-scan-icon
        font-size 0
        height 0.38rem * $rem
        img
          max-height 100%
      .qr-code-scan-text
        font-size 0.28rem * $rem
        color #5095f3
        padding-left 0.2rem * $rem
</style>
